<template>
  <div>
    <a-card
      class="table"
      :class="{ drakTheme: route?.meta?.theme == 'dark' || drakTheme }"
    >
      <template #title v-if="title">
        <p class="title">{{ title }}</p>
        <slot name="header"></slot>
      </template>
      <template #title v-else>
        <slot name="header"></slot>
      </template>
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :scroll="{ x: width, y: '50vh' }"
        :pagination="pagination"
        :customRow="customRow"
        :rowSelection="rowSelection"
        rowKey="id"
         @change="tableChange"
      >
        <!-- {
          total: dataSource.length,
          showTotal: (total) => `共 ${total} 条`,
          showQuickJumper: true,
          showSizeChanger: false,
        } -->
        <template v-for="(index, name) in $slots" v-slot:[name]="slotProps">
          <slot :name="name" v-bind="slotProps"></slot>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRefs, defineEmits } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
import router from "@/router";
const props = defineProps({
  drakTheme: Boolean,
  title: String,
  height: {
    type: Number,
    default: 240,
  },
  width: {
    type: Number,
    default: null,
  },
  dataSource: [],
  columns: [],
  rowSelection:{},
  pagination: {
    default: null,
  },
});
const { title, drakTheme, height, width, dataSource, columns, pagination, rowSelection } = toRefs(
  props
);

// 定义派发事件
const emit = defineEmits(['handleChangeList'])

function tableChange(e){
  emit('handleChangeList',e)
}

function customRow(record, index) {
  return {
      // 鼠标单击行
      onClick: event => {
        // do something
        // console.log(title.value)
        // console.log(record)
        // 榜单详情跳转网址库
        if(title.value == '榜单详情'){
          router.push("/urlLibrary?url=" + record.host);
        }
      }
  }
}
</script>
<style lang="less" scoped>
.table {
  //   表头
  /deep/ .ant-card-head {
    .ant-card-head-title {
      display: flex;
      .title {
        flex: 1;
      }
    }
    margin: 0 20px;
    padding: 0;
  }
  /deep/ .ant-card-body {
    display: flex;
    .ant-table-wrapper {
      display: flex;
      width: 100%;
      .ant-spin-nested-loading {
        display: flex;
        width: 100%;
        .ant-spin-container {
          display: flex;
          flex-direction: column;
          width: 100%;
          .ant-table {
            flex: 1;
            width: 100%;
            overflow-y: auto;
            .ant-table-content {
              max-height: none !important;
            }
          }
        }
      }
    }
  }

  /deep/ .ant-table-pagination {
    justify-content: flex-start;
  }
  &.drakTheme {
    background: transparent;
    color: #fff;
    border: none;
    //   表头
    /deep/ .ant-card-head {
      color: #fff;
      border-bottom: 1px solid #1f2327;
    }
    /deep/ .ant-table {
      background: transparent;
      color: #fff;
      table {
        border-spacing: 0 10px;
      }
      .ant-table-thead > tr > th {
        background: transparent;
        color: #fff;
        border-bottom: none;
      }
      .ant-table-tbody > tr > td {
        border-bottom: none;
      }
      .ant-table-row {
        background: #131313;
        border-bottom: 20px;
      }
      .ant-table-cell-row-hover {
        background: #666;
      }
      .ant-table-cell-scrollbar {
        display: none;
      }

      // 空表格
      .ant-empty-normal {
        color: #999;
      }
      .ant-table-tbody > tr.ant-table-placeholder:hover > td {
        background: transparent;
      }
    }
    //   分页
    /deep/ .ant-table-pagination {
      color: #fff;
      .ant-pagination-item {
        background: transparent;
        border: 1px solid #1f2327;
        a {
          color: #fff;
        }
      }
      .ant-pagination-prev .ant-pagination-item-link,
      .ant-pagination-next .ant-pagination-item-link,
      .ant-select-selector{
        border: 1px solid #1f2327;
        background: transparent;
        color: #fff;
      }
      .ant-pagination-disabled {
        .ant-pagination-item-link {
          border: 1px solid #1f2327;
          background: transparent;
          color: #fff;
        }
      }

      .ant-pagination-item-active {
        background: #01cbfe;
        a {
          color: #fff;
        }
      }
      .ant-pagination-item-ellipsis {
        color: #fff;
      }
      .ant-pagination-options-quick-jumper {
        input {
          background: transparent;
          color: #fff;
          border: 1px solid #1f2327;
        }
      }
    }
  }
}
</style>
